<template>
  <div class="order-detail page-container">
    <div class="page-header">
      <div class="header-content">
        <el-button @click="goBack" class="back-btn">
          <svg class="back-icon" viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
            />
          </svg>
          返回
        </el-button>
        <div class="title-section">
          <h1 class="page-title">订单详情</h1>
          <p class="page-subtitle">查看订单的完整信息</p>
        </div>
      </div>
    </div>

    <div v-if="loading" class="loading-container">
      <el-icon class="loading-icon"><el-loading /></el-icon>
      <p>加载中...</p>
    </div>

    <div v-else-if="orderDetail" class="content-container">
      <!-- 订单基本信息 -->
      <div class="detail-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon class="title-icon"><Document /></el-icon>
            订单基本信息
          </h3>
          <el-tag :type="getStatusType(orderDetail.orderStatus)" size="large">
            {{ getStatusText(orderDetail.orderStatus) }}
          </el-tag>
        </div>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">订单号:</span>
            <span class="value">{{ orderDetail.orderNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户ID:</span>
            <span class="value">{{ orderDetail.userId }}</span>
          </div>
          <div class="info-item">
            <span class="label">订单类型:</span>
            <span class="value">
              <el-tag
                :type="getOrderTypeTagType(orderDetail.orderType)"
                size="small"
              >
                {{ getOrderTypeText(orderDetail.orderType) }}
              </el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="label">支付方式:</span>
            <span class="value">{{
              getPaymentTypeText(orderDetail.paymentType)
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">支付时间:</span>
            <span class="value">{{ orderDetail.paymentTime || "-" }}</span>
          </div>
          <div class="info-item">
            <span class="label">支付流水号:</span>
            <span class="value">{{ orderDetail.paymentSerialNo || "-" }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间:</span>
            <span class="value">{{ orderDetail.createdTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">修改时间:</span>
            <span class="value">{{ orderDetail.modifiedTime || "-" }}</span>
          </div>
        </div>
      </div>

      <!-- 订单金额信息 -->
      <div class="detail-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon class="title-icon"><Money /></el-icon>
            订单金额信息
          </h3>
        </div>
        <div class="amount-grid">
          <div class="amount-item total-amount">
            <div class="amount-label">商品总金额</div>
            <div class="amount-value">
              {{ formatCurrency(orderDetail.totalAmount) }}
            </div>
          </div>
          <div class="amount-item discount-amount">
            <div class="amount-label">促销优惠</div>
            <div class="amount-value">
              {{ `-${formatCurrency(orderDetail.discountAmount)}` }}
            </div>
          </div>
          <div class="amount-item point-amount">
            <div class="amount-label">积分抵扣</div>
            <div class="amount-value">
              {{ `-${formatCurrency(orderDetail.pointAmount)}` }}
            </div>
          </div>
          <div class="amount-item payment-amount">
            <div class="amount-label">商品实付金额</div>
            <div class="amount-value">
              {{ formatCurrency(orderDetail.paymentAmount) }}
            </div>
          </div>
          <div class="amount-item freight-amount">
            <div class="amount-label">运费</div>
            <div class="amount-value">
              {{ formatCurrency(orderDetail.freightAmount) }}
            </div>
          </div>
          <div class="amount-item total-payment-amount">
            <div class="amount-label">实付总金额</div>
            <div class="amount-value">
              {{
                formatCurrency(
                  (orderDetail.paymentAmount || 0) +
                    (orderDetail.freightAmount || 0)
                )
              }}
            </div>
          </div>
        </div>
      </div>

      <!-- 物流信息 -->
      <div class="detail-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon class="title-icon"><Van /></el-icon>
            物流信息
          </h3>
        </div>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">物流公司:</span>
            <span class="value">{{
              orderDetail.orderDeliveryInfoVO?.deliveryCompany || "-"
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">物流单号:</span>
            <span class="value">{{
              orderDetail.orderDeliveryInfoVO?.deliveryNo || "-"
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">发货时间:</span>
            <span class="value">{{
              orderDetail.orderDeliveryInfoVO?.deliveryTime || "-"
            }}</span>
          </div>
          <div class="info-item">
            <span class="label">收货状态:</span>
            <span class="value">
              <el-tag
                :type="
                  getReceiveStatusType(
                    orderDetail.orderDeliveryInfoVO?.receiveStatus
                  )
                "
                size="small"
              >
                {{
                  getReceiveStatusText(
                    orderDetail.orderDeliveryInfoVO?.receiveStatus
                  )
                }}
              </el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="label">收货时间:</span>
            <span class="value">{{
              orderDetail.orderDeliveryInfoVO?.receiveTime || "-"
            }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">物流详情:</span>
            <span class="value">{{
              orderDetail.orderDeliveryInfoVO?.deliveryContent || "-"
            }}</span>
          </div>
        </div>
      </div>

      <!-- 收货地址信息 -->
      <div class="detail-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon class="title-icon"><Location /></el-icon>
            收货地址信息
          </h3>
        </div>
        <div class="address-card">
          <div class="address-info">
            <div class="receiver-info">
              <span class="receiver-name">{{
                orderDetail.orderAddressVO?.receiverName || "-"
              }}</span>
              <span class="receiver-phone">{{
                orderDetail.orderAddressVO?.receiverPhone || "-"
              }}</span>
            </div>
            <div class="address-detail">
              <span class="address-text">
                {{ getFullAddress(orderDetail.orderAddressVO) }}
              </span>
              <span
                v-if="orderDetail.orderAddressVO?.postcode"
                class="postcode"
              >
                邮编：{{ orderDetail.orderAddressVO.postcode }}
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 订单信息 -->
      <div class="detail-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon class="title-icon"><InfoFilled /></el-icon>
            订单信息
          </h3>
        </div>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">订单来源:</span>
            <span class="value">{{ getSourceText(orderDetail.source) }}</span>
          </div>
          <div class="info-item">
            <span class="label">活动ID:</span>
            <span class="value">{{ orderDetail.promotionId || "-" }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">订单备注:</span>
            <span class="value">{{ orderDetail.remark || "-" }}</span>
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="detail-card">
        <div class="card-header">
          <h3 class="card-title">
            <el-icon class="title-icon"><List /></el-icon>
            商品列表
          </h3>
        </div>
        <el-table
          :data="orderDetail.itemVOS || []"
          class="items-table"
          stripe
          border
        >
          <el-table-column label="商品图片" width="100" align="center">
            <template #default="{ row }">
              <el-image
                :src="row.skuImage"
                :preview-src-list="[row.skuImage]"
                fit="cover"
                style="width: 60px; height: 60px; border-radius: 4px"
                :hide-on-click-modal="false"
              />
            </template>
          </el-table-column>
          <el-table-column prop="spuName" label="商品名称" min-width="200" />
          <el-table-column label="规格" width="150">
            <template #default="{ row }">
              <span>{{ formatSkuSpecs(row.skuSpecs) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="skuNumber"
            label="数量"
            width="80"
            align="center"
          />
          <el-table-column label="单价" width="120" align="right">
            <template #default="{ row }">
              <span>{{ formatCurrency(row.unitPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实际单价" width="120" align="right">
            <template #default="{ row }">
              <span>{{ formatCurrency(row.actualPrice / row.skuNumber) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="优惠金额" width="120" align="right">
            <template #default="{ row }">
              -
              <span>{{
                formatCurrency(row.discountPrice + row.pointPrice)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="小计" width="120" align="right">
            <template #default="{ row }">
              <span class="amount">{{ formatCurrency(row.actualPrice) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="退款状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag
                :type="getRefundStatusType(row.refundStatus)"
                size="small"
              >
                {{ getRefundStatusText(row.refundStatus) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div class="total-section">
          <div class="total-item">
            <span class="total-label">商品总计:</span>
            <span class="total-value">{{
              formatCurrency(getItemsTotal())
            }}</span>
          </div>
          <div class="total-item">
            <span class="total-label">运费:</span>
            <span class="total-value">{{
              formatCurrency(orderDetail.freightAmount)
            }}</span>
          </div>
          <div class="total-item">
            <span class="total-label">优惠金额:</span>
            <span class="total-value"
              >-{{ formatCurrency(orderDetail.discountAmount) }}</span
            >
          </div>
          <div class="total-item">
            <span class="total-label">积分抵扣金额:</span>
            <span class="total-value"
              >-{{ formatCurrency(orderDetail.pointAmount) }}</span
            >
          </div>
          <div class="total-item final">
            <span class="total-label">实付金额:</span>
            <span class="total-value amount">{{
              formatCurrency(
                safeSum(orderDetail.paymentAmount, orderDetail.freightAmount)
              )
            }}</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-section">
        <el-button
          type="success"
          @click="shipOrder"
          class="action-btn"
          :disabled="orderDetail.orderStatus !== 1"
        >
          发货
        </el-button>
        <el-button
          type="warning"
          @click="cancelOrder"
          class="action-btn"
          :disabled="
            orderDetail.orderStatus === 5 || orderDetail.orderStatus === 4
          "
        >
          取消订单
        </el-button>
        <el-button
          type="danger"
          @click="refundOrder"
          class="action-btn"
          :disabled="![1, 3, 4].includes(orderDetail.orderStatus)"
        >
          退款
        </el-button>
      </div>
    </div>

    <div v-else class="error-container">
      <el-empty description="订单不存在或已被删除" :image-size="120" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getWithAuth } from "@/utils/request";
import {
  Document,
  Van,
  Location,
  List,
  InfoFilled,
  Money,
} from "@element-plus/icons-vue";

interface OrderItemVO {
  id: string;
  orderId: string;
  spuId: string;
  skuId: string;
  spuName: string;
  skuSpecs: string;
  skuImage: string;
  skuNumber: number;
  unitPrice: number | null;
  totalPrice: number | null;
  actualPrice: number | null;
  discountPrice: number | null;
  promotionId: string | null;
  refundStatus: number;
  refundAmount: number | null;
  createdTime: string;
  modifiedTime: string | null;
}

interface OrderDetail {
  id: string;
  orderNo: string;
  userId: string;
  orderStatus: number;
  totalAmount: number | null;
  paymentAmount: number | null;
  discountAmount: number | null;
  pointAmount: number | null;
  freightAmount: number | null;
  refundAmount: number | null;
  paymentType: number | null;
  paymentTime: string | null;
  paymentSerialNo: string | null;
  source: number | null | undefined;
  orderType: number | null | undefined;
  promotionId: string | null;
  remark: string | null;
  createdTime: string;
  modifiedTime: string | null;
  itemVOS: OrderItemVO[] | null;
  orderAddressVO: OrderAddressVO | null;
  orderDeliveryInfoVO: OrderDeliveryInfoVO | null;
}
interface OrderAddressVO {
  id: string;
  receiverName: string;
  receiverPhone: string;
  receiverProvince: string;
  receiverCity: string;
  receiverAddress: string;
  postcode: string;
}
interface OrderDeliveryInfoVO {
  id: string;
  orderId: string;
  deliveryCompany: string;
  deliveryNo: string;
  deliveryTime: string;
  receiveStatus: number;
  receiveTime: string;
  deliveryContent: string;
}

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const orderDetail = ref<OrderDetail | null>(null);

// 获取订单类型标签类型
const getOrderTypeTagType = (type: number | null | undefined): string => {
  if (!type) return "info";
  switch (type) {
    case 1:
      return "info"; // 普通
    case 2:
      return "success"; // 满减
    case 3:
      return "warning"; // 折扣
    case 4:
      return "danger"; // 特价
    case 5:
      return "primary"; // 拼团
    default:
      return "info";
  }
};

// 获取订单类型文本
const getOrderTypeText = (type: number | null | undefined): string => {
  if (!type) return "普通";
  switch (type) {
    case 1:
      return "普通";
    case 2:
      return "满减";
    case 3:
      return "折扣";
    case 4:
      return "特价";
    case 5:
      return "拼团";
    default:
      return "普通";
  }
};

const getStatusType = (status: number): string => {
  switch (status) {
    case 0:
      return "warning"; // 待付款
    case 1:
      return "primary"; // 已付款待发货
    case 2:
      return "info"; // 支付超时
    case 3:
      return "success"; // 已发货
    case 4:
      return "success"; // 已完成
    case 5:
      return "default"; // 已取消
    case 6:
      return "warning"; // 申请退款
    case 7:
      return "warning"; // 部分退款
    case 8:
      return "danger"; // 全部退款
    case 9:
      return "info"; // 已评价
    default:
      return "info";
  }
};

const getStatusText = (status: number): string => {
  switch (status) {
    case 0:
      return "待付款";
    case 1:
      return "已付款(待发货)";
    case 2:
      return "支付超时";
    case 3:
      return "已发货";
    case 4:
      return "已完成";
    case 5:
      return "已取消";
    case 6:
      return "申请退款";
    case 7:
      return "部分退款";
    case 8:
      return "全部退款";
    case 9:
      return "已评价";
    default:
      return "未知";
  }
};

const getPaymentTypeText = (type: number | null): string => {
  if (type === 1) return "支付宝";
  if (type === 2) return "微信";
  return "-";
};

const getSourceText = (source: number | null | undefined): string => {
  if (source === 1) return "PC";
  if (source === 2) return "APP";
  if (source === 3) return "小程序";
  return "-";
};

const getRefundStatusType = (status: number): string => {
  switch (status) {
    case 0:
      return "info"; // 无退款
    case 1:
      return "warning"; // 退款中
    case 2:
      return "success"; // 已退款
    default:
      return "info";
  }
};

const getRefundStatusText = (status: number): string => {
  switch (status) {
    case 0:
      return "无退款";
    case 1:
      return "退款中";
    case 2:
      return "已退款";
    default:
      return "未知";
  }
};

const getReceiveStatusType = (status: number | null | undefined): string => {
  if (status === 1) return "success"; // 已收货
  if (status === 0) return "info"; // 未收货
  return "warning"; // 未知
};

const getReceiveStatusText = (status: number | null | undefined): string => {
  if (status === 1) return "已收货";
  if (status === 0) return "未收货";
  return "未知";
};

const getFullAddress = (address: OrderAddressVO | null): string => {
  if (!address) return "-";
  return `${address.receiverProvince}${address.receiverCity}${address.receiverAddress}`;
};

const formatCurrency = (value: number | null | undefined): string => {
  if (value === null || value === undefined) return "-";
  const num = Number(value);
  if (Number.isNaN(num)) return "-";
  return `¥${num.toFixed(2)}`;
};

// 新增一个安全的求和函数
const safeSum = (
  a: number | null | undefined,
  b: number | null | undefined
): number => {
  const numA = a !== null && a !== undefined ? Number(a) : 0;
  const numB = b !== null && b !== undefined ? Number(b) : 0;

  if (Number.isNaN(numA) || Number.isNaN(numB)) return 0;

  return numA + numB;
};

const formatSkuSpecs = (specs: string): string => {
  if (!specs) return "-";
  try {
    const parsed = JSON.parse(specs);
    if (typeof parsed === "object") {
      return Object.entries(parsed)
        .map(([key, value]) => `${key}: ${value}`)
        .join(", ");
    }
    return specs;
  } catch {
    return specs;
  }
};

const getItemsTotal = (): number => {
  if (!orderDetail.value?.itemVOS) return 0;
  return orderDetail.value.itemVOS.reduce(
    (sum, item) => sum + (item.totalPrice || 0),
    0
  );
};

const fetchOrderDetail = async () => {
  const orderId = route.params.id as string;
  if (!orderId) {
    ElMessage.error("订单ID不存在");
    return;
  }

  loading.value = true;
  try {
    const response = await getWithAuth(`/internal/order/detail/${orderId}`);
    if (response.code === 0 && response.data) {
      orderDetail.value = response.data;
    } else {
      ElMessage.error(response.message || "获取订单详情失败");
    }
  } catch (error) {
    console.error("获取订单详情失败:", error);
    ElMessage.error("获取订单详情失败");
  } finally {
    loading.value = false;
  }
};

const goBack = () => {
  router.back();
};

const shipOrder = async () => {
  try {
    await ElMessageBox.confirm("确定要发货吗？", "确认发货", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    ElMessage.success("订单发货成功");
    fetchOrderDetail();
  } catch {
    // 用户取消
  }
};

const cancelOrder = async () => {
  try {
    await ElMessageBox.confirm(
      "确定要取消订单吗？此操作不可撤销。",
      "确认取消",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    ElMessage.success("订单取消成功");
    fetchOrderDetail();
  } catch {
    // 用户取消
  }
};

const refundOrder = async () => {
  try {
    await ElMessageBox.confirm("确定要退款吗？此操作不可撤销。", "确认退款", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    ElMessage.success("退款申请已提交");
    fetchOrderDetail();
  } catch {
    // 用户取消
  }
};

onMounted(() => {
  fetchOrderDetail();
});
</script>

<style scoped>
.order-detail {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 12px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
}

.back-icon {
  width: 16px;
  height: 16px;
}

.title-section {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 6px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 15px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.loading-icon {
  font-size: 32px;
  color: #667eea;
  margin-bottom: 16px;
}

.content-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-card {
  background: white;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.detail-card:hover {
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #eef2ff;
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-icon {
  color: #6366f1;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item .label {
  font-weight: 600;
  color: #6b7280;
  min-width: 100px;
  margin-right: 12px;
}

.info-item .value {
  color: #111827;
  flex: 1;
}

/* 金额网格样式 */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.amount-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  transition: all 0.3s ease;
}

.amount-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.amount-label {
  font-size: 12px;
  color: #8b949e;
  font-weight: 500;
  margin-bottom: 8px;
  text-align: center;
}

.amount-value {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* 商品总金额样式 */
.total-amount {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
}

.total-amount .amount-value {
  color: #24292f;
}

/* 促销优惠样式 */
.discount-amount {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0;
}

.discount-amount .amount-value {
  color: #1a7f37;
}

/* 积分抵扣样式 */
.point-amount {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}

.point-amount .amount-value {
  color: #d29922;
}

/* 商品实付金额样式 */
.payment-amount {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}

.payment-amount .amount-value {
  color: #0969da;
}

/* 运费样式 */
.freight-amount {
  background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%);
  border-color: #c4b5fd;
}

.freight-amount .amount-value {
  color: #6f42c1;
}

/* 实付总金额样式 */
.total-payment-amount {
  background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
  border-color: #fca5a5;
  border-width: 2px;
}

.total-payment-amount .amount-value {
  color: #d1242f;
  font-size: 18px;
}

/* 地址卡片样式 */
.address-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 20px;
}

.address-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.receiver-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.receiver-name {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.receiver-phone {
  font-size: 14px;
  color: #475569;
  background: #e2e8f0;
  padding: 4px 8px;
  border-radius: 6px;
}

.address-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.address-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.5;
}

.postcode {
  font-size: 12px;
  color: #64748b;
}

.amount {
  font-weight: 700;
  color: #ef4444;
}

.items-table {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.total-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.total-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.total-item.final {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
}

.total-label {
  color: #6b7280;
}

.total-value {
  color: #111827;
}

.action-section {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-btn {
  min-width: 120px;
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 平板端适配 */
@media (max-width: 1024px) {
  .order-detail {
    padding: 20px;
  }

  .page-header {
    padding: 0;
  }

  .page-title {
    font-size: 24px;
  }

  .page-subtitle {
    font-size: 14px;
  }

  .detail-card {
    padding: 20px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .amount-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .action-section {
    flex-wrap: wrap;
    gap: 8px;
  }

  .action-btn {
    min-width: 100px;
  }
}

/* 手机端适配 */
@media (max-width: 768px) {
  .order-detail {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-content {
    background: transparent;
    border: none;
    padding: 0;
  }

  .title-section {
    flex: 1;
  }

  .page-title {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .page-subtitle {
    font-size: 13px;
  }

  .detail-card {
    padding: 16px;
    border-radius: 10px;
  }

  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .info-item .label {
    min-width: auto;
    margin-right: 0;
  }

  .amount-grid {
    grid-template-columns: 1fr;
  }

  .amount-item {
    padding: 12px;
  }

  .amount-value {
    font-size: 14px;
  }

  .total-payment-amount .amount-value {
    font-size: 16px;
  }

  .receiver-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .action-section {
    flex-direction: column;
    gap: 8px;
  }

  .action-btn {
    width: 100%;
    min-width: auto;
  }
}
</style>
